<template>
	<div>
	  <h1>用户模型列表</h1>
	  <table class="model-table">
		<thead>
		  <tr>
			<th>ID</th>
			<th>名称</th>
			<th>图片</th>
			<th>删除</th>
		  </tr>
		</thead>
		<tbody>
		  <tr v-for="model in models" :key="model.id" class="model-item">
			<td>{{ model.id }}</td>
			<td class="model-name" @click="handleClick(model.id)">{{ model.name }}</td>
			<td>
			  <img :src="model.image" @click="handleClick(model.id)" alt="模型图片" class="model-image" />
			</td>
			<td>
			  <img
				src="../../assets/delete.png"
				class="delete-image"
				@click="deleteModel(model.id)"
			  />
			</td>
		  </tr>
		</tbody>
	  </table>
	   <button v-if="!noMoreData" @click="loadMore" class="load-more">加载更多</button>
	   <p v-else class="no-more-data">没有更多数据了</p>
	</div>
  </template>
  <script setup>
  import { ref, onMounted } from 'vue';
  // import axios from 'axios';
  import request from '../../api/request'
  import { useRouter } from 'vue-router'
  
  const models = ref([]);
  const noMoreData = ref(false);
  const router = useRouter()
  
  let currentPage = 1;
  const limit = 10;
  
  const fetchData = async (page) => {
	const username = localStorage.getItem('username');
	if (username) {
	  try {
		const response = await request.get('usermodel', {
		  params: {
			user: username,
			page: page,
			limit: limit
		  }
		});
		return response.data;
	  } catch (error) {
		console.error('获取用户模型失败:', error);
	  }
	} else {
	  console.log('用户名未在localStorage中找到');
	}
  };
  
  onMounted(async () => {
	const initialData = await fetchData(currentPage);
	models.value = initialData;
  });
  
  const handleClick = (id) => {
	router.push({ name: 'FishDetails', params: { id } })
  }
  
  const deleteModel = async (id) => {
	const confirmDelete = window.confirm('您确定要删除此模型吗？');
	if (!confirmDelete) return;
	try {
	  const response = await request.get('modeldelete', {
		params: {
		  id: id
		}
	  });
	  console.log(response.data);
	  if (response.data.delete_status === '删除成功') {
		models.value = models.value.filter((model) => model.id !== id);
	  } else {
		console.error('删除失败');
	  }
	} catch (error) {
	  console.error('删除模型失败:', error);
	}
  };
  
  const loadMore = async () => {
	currentPage += 1;
	const newData = await fetchData(currentPage);
	if (newData.length === 0) {
	  noMoreData.value = true;
	} else {
	  models.value = [...models.value, ...newData];
	}
  };
  </script>
  
  <style scoped>
  .model-table {
	border-collapse: collapse;
	width: 100%;
  }
  
  .model-table th,
  .model-table td {
	border: 1px solid #ddd;
	padding: 8px;
	text-align: left;
  }
  
  .model-table th {
	background-color: #f2f2f2;
	font-weight: bold;
  }
  
  .model-name {
	font-size: 1.2em;
	font-weight: bold;
	margin-right: 10px;
	cursor: pointer;
  }
  
  .model-name:hover {
	color: #ffffff;
  }
  
  .model-image {
	width: 100px;
	height: auto;
	border-radius: 3px;
	cursor: pointer;
  }
  
  .delete-image {
	height: 30px;
	width: 30px;
	cursor: pointer;
  }
  
  .model-item td:hover{
	background-color: #e0e0e0;
  }
  .model-item td:first-child:hover{
	background-color: white;
  }
  .load-more {
	display: block;
	margin: 20px auto;
	padding: 10px 20px;
	background-color: #007bff;
	color: #fff;
	border: none;
	border-radius: 5px;
	font-size: 16px;
	cursor: pointer;
  }
  
  .load-more:hover {
	background-color: #0069d9;
  }
  .no-more-data {
	text-align: center;
	margin-top: 20px;
	font-size: 14px;
	color: #999;
  }
  </style>
  
  